<template>
  <div>
    <el-drawer
      title="详细信息"
      :direction="'ltr'"
      :visible.sync="dialogVisible"
      width="80%"
      size="80%"
      destroy-on-close
    >
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="document" name="first">
            <documentList v-if="archiveeId" :archiveeId="archiveeId"></documentList>
          </el-tab-pane>
          <el-tab-pane label="attachment" name="second">
            <attachmentList v-if="archiveeId" :archiveeId="archiveeId"></attachmentList>
          </el-tab-pane>
          <el-tab-pane label="image" name="third">
            <photoList v-if="archiveeId" :archiveeId="archiveeId"></photoList>
          </el-tab-pane>
          <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
        </el-tabs>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div> -->
    </el-drawer>
  </div>
</template>

<script>
import documentList from "./documentList.vue";
import attachmentList from "./attachmentList.vue";
import photoList from "./photoList.vue";

export default {
  dicts: [],
  components: {
    documentList,
    attachmentList,
    photoList,
  },

  data() {
    return {
      resolve: null,
      dialogVisible: false,
      activeName: "first",
      archiveeId: null,
    };
  },
  methods: {
    handleClick(tab, event) {},
    open(row) {
      console.log(row);
      this.dialogVisible = true;
      // row && (this.form = row);
      this.archiveeId = row?.id;
      return new Promise((resolve) => {
        this.resolve = resolve;
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
